<template>
  <div>

    <div>
      <el-card class="box-card" style="margin-bottom: 35px;">

        <el-form ref="driverForm" :model="driverForm" label-width="100px">
          <el-row type="flex" justify="space-between">
            <el-form-item label="司机账号:">
              <el-input v-model="driverForm.account" placeholder="请输入司机账户" />
            </el-form-item>
            <el-form-item label="司机姓名:">
              <el-input v-model="driverForm.name" placeholder="请输入司机姓名" />
            </el-form-item>
            <el-form-item label="司机手机号:">
              <el-input v-model="driverForm.phone" placeholder="请输入司机手机号" />
            </el-form-item>
          </el-row>
          <el-row type="flex">
            <el-form-item label="所属机构">
              <!-- 下拉 树形图 关键select需要option 关键思路隐藏 option 直接显示自适应树状结构   -->
              <el-select ref="selectTree" v-model="selectValue" class="main-select-tree">
                <el-option v-for="item in treeData" :key="item.id" :label="item.name" :value="value" style="display: none;" />
                <el-tree
                  ref="selecteltree"
                  class="main-select-el-tree"
                  :data="treeData"
                  node-key="id"
                  highlight-current
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  @node-click="hasValue"
                />
              </el-select>

            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSearch">搜索</el-button>
              <el-button @click="clear">重置</el-button>
            </el-form-item>
          </el-row>
        </el-form>
        <!--  -->
      </el-card>
    </div>

    <el-card class="box-card" style="padding: 10px;">
      <div style="border: 1px solid #ebeef5 ;">
        <el-table
          :v-loading="true"
          :data="driverList"
          stripe
          style="width: 100%"
          :header-cell-style="{ background: '#f8faff' }"
        >
          <el-table-column
            label="序号"
            width="100"
            type="index"
            :index="(paramsPage.page-1)*paramsPage.pageSize+1"
          />
          <el-table-column
            prop="account"
            label="司机账号"
          />
          <el-table-column
            prop="name"
            label="司机姓名"
          />
          <el-table-column
            prop="mobile"
            label="司机电话"
          />
          <el-table-column
            prop="truck.licensePlate"
            label="关联车辆"
          />
          <el-table-column
            prop="agency.name"
            label="所属机构"
          />
          <el-table-column
            prop="workStatus"
            label="工作状态"
          >
            <template v-slot="{row}">
              <span v-if="row.workStatus" class="dotRed">上班</span>
              <span v-else class="dot">休息</span>
              <span />
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
          >
            <template v-slot="{row}">

              <el-button class="operate" @click="look(row.userId)">查看</el-button>
              <span style="color:#dcdfe6">|</span>
              <el-button class="operate" @click="drivergetList(row)">配置车辆</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-row type="flex" justify="center" style="margin-top: 20px;">
        <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="paramsPage.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>

    </el-card>
    <configDriver :dialog-visible.sync="dialogVisible" :rows="rows" />
  </div>
</template>

<script>
import { getDirverList } from '@/api/driver'
import { getTree } from '@/api/user'
function objPage() {
  return {
    page: 1,
    pageSize: 10
  }
}

function objForm() {
  return {
    account: '',
    name: '',
    phone: '',
    agentId: ''
  }
}
import configDriver from './components/configDriver'
export default {
  name: 'Driver',
  components: {
    configDriver
  },
  data() {
    return {
      driverForm: objForm(),
      selectValue: '',
      total: null,
      treeData: [],
      driverList: [],
      paramsPage: objPage(),
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      value: null,
      dialogVisible: false,
      rows: null
    }
  },
  async created() {
    this.getList()
    const res = await getTree()
    this.treeData = JSON.parse(res.data)
  },
  methods: {
    // 每页显示条数发生改变时
    handleSizeChange(page) {
      this.paramsPage.pageSize = page
      this.getList()
    },
    // 点击与回车分页
    handleCurrentChange(page) {
      this.paramsPage.page = page
      this.getList()
    },
    async getList() {
      const { data } = await getDirverList(this.paramsPage)
      this.total = +data.counts
      this.driverList = data.items
    },
    look(id) {
      this.$store.commit('user/SET_NAV_STATUS', true)
      this.$router.push(`/driverDetail/${id}`)
    },
    hasValue(row) {
      console.log(row)
      this.driverForm.agentId = row.id
      this.selectValue = row.name
      this.$refs.selectTree.blur()
    },
    onSearch() {
      this.paramsPage = { ...this.paramsPage, ...this.driverForm }
      this.getList()

      // 复原
      this.paramsPage = objPage()
    },
    // 重置
    clear() {
      this.driverForm = objForm()
      this.selectValue = ''
      this.getList()
    },
    drivergetList(row) {
      this.$store.commit('user/SET_NAV_STATUS', true)
      this.rows = row
      this.dialogVisible = true
    }

  }

}
</script>

<style scoped lang="scss">
  ::v-deep .el-form-item{
    width: 30% !important;
  }
  ::v-deep .el-input, ::v-deep .el-select{
    width: 100% !important;
  }
  .operate{
    background-color: transparent;
    border: none;
    color:#419eff ;
  }
  ::v-deep .btn-next,::v-deep .btn-prev,::v-deep .el-pager,::v-deep .el-pagination button:disabled,::v-deep .el-pager li {
    background-color: #f3f5f9;
  }

  .dot{
    &::before{
      content: '';
      position: absolute;
      top: 50%;
      transform: translate(0,-50%);
      left: -2%;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color:#e15536 ;
    }
  }
  .dotRed{
    &::before{
      content: '';
      position: absolute;
      top: 50%;
      transform: translate(0,-50%);
      left: -2%;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color: #1dc779;
    }
  }
  ::v-deep .el-table_1_column_8{
   .cell{
    text-align: center;
   }
  }

</style>
